<template>
  <div>
    <el-card class="box-card" style="position: relative;">
      <h3>
        {{ greeting }} 欢迎登录 <em>短链监控 中心</em>
      </h3>
      <div
        style="position: absolute; top: 0; right: 30px;bottom: 0;display: flex;align-items: center;justify-content: center;">
        <h3 style="color: #FF9900;">{{ formattedTime }}</h3>
      </div>
    </el-card>
    <br>
    <el-card>
      <div class="Cardminbox">
        <div class="Cardmin">
          <h2 style="color: #1062F5;">{{ this.totalshuju.yesCheckNum }}</h2>
          <span><b>昨日监控</b></span>
        </div>
        <div class="Cardmin">
          <h2 style="color: #1062F5;">{{ this.totalshuju.yesCheckNumException }}</h2>
          <span><b>昨日异常</b></span>
        </div>
        <div class="Cardmin">
          <h2 style="color: #1062F5;">{{ this.totalshuju.todayCheckNum }}</h2>
          <span><b>今日监控</b></span>
        </div>
        <div class="Cardmin">
          <h2 style="color: #1062F5;">{{ this.totalshuju.todayCheckNumException }}</h2>
          <span><b>今日异常</b></span>
        </div>
      </div>
    </el-card>
    <br>

    <el-card>
      <div style="width: 100%;display: flex;align-items: center;justify-content: space-between;">
        <div>
          <div class="echar" id="main" ref="main" style="width: 400px;height: 400px;"></div>

        </div>
      </div>

    </el-card>




  </div>
</template>
<script>
import { HomeData } from "@/api/table";
export default {
  data() {
    return {
      optionssss: {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '2%',
          left: 'center'
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 10,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              
            ]
          }
        ]
      },

      activeName: 'first',
      currentTime: new Date(),
      totalshuju: [],
      echartslist: [],

    };
  },
  computed: {
    formattedTime() {
      const options = {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit',
        hour12: false,
      };
      return this.currentTime.toLocaleString('zh-CN', options).replace(/\//g, '-');
    },
    greeting() {
      const hour = this.currentTime.getHours();
      if (hour < 12) {
        return '早上好！';
      } else if (hour < 18) {
        return '下午好！';
      } else {
        return '晚上好！';
      }
    },
  },
  mounted() {
    this.updateTime();
    setInterval(this.updateTime, 1000); // 每秒更新一次时间
    this.myEcharts();
    this.gethomeshuju()
  },
  methods: {
    async gethomeshuju() {
      let res = await HomeData();
      this.totalshuju = res.data;
      this.echartslist = res.data.reasons;
      console.log(this.echartslist, "sad");
      const transformedData = res.data.reasons.map(item => ({
        name: item.reason,
        value: item.num
      }));
      this.optionssss.series[0].data = transformedData;
      var myChart = this.$echarts.init(document.getElementById("main"));
      myChart.setOption(this.optionssss);
    },


    myEcharts() {
      var myChart = this.$echarts.init(document.getElementById("main"));
      myChart.setOption(this.optionssss);
    },
    updateTime() {
      this.currentTime = new Date();
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-card__body {
  display: flex;
  align-items: center;
}

.boxCardText {
  position: relative;

}

.Cardminbox {
  width: 80%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.Cardmin {
  width: 20%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
}

.card1txt {
  margin-top: 20px;
  font-weight: 600;
}

.card2txt {
  margin-top: 20px;
  font-weight: 600;
  color: #FF9900;
}

.card3txt {
  margin-top: 20px;
  font-weight: 600;
  color: #FF0000;
}
</style>